<template>
  <div>
    <div style="position: relative;">
      <div class="clearfix" style="margin-bottom: 30px;">
        <div style="float: left; height: 28px; line-height: 28px;">
          <span style="margin-left: 5px; margin-right: 10px; color: #ff4949;">流程标题：

            <el-input
              v-model="paramsData.title"
              size="small"
              :placeholder="`请输入流程标题`"
              style="width: 280px;"
              @input="changeTitle($event)"
            />

          </span>
          <span style="color: #409EFF;">部门：{{ deptName }}</span>
          <span style="margin-left: 15px; color: #67C23A;">月份：{{ salaryDate }}</span>
          <span style="margin-left: 20px; color: #222;">人数：{{ pnum }}</span>

        </div>
        <div style="float: right;">
          <el-button
            type="success"
            size="mini"
            @click="goBack"
          >返回
          </el-button>
          <el-popover
            class="cyui-popover"
            placement="bottom-end"
            width="200"
            trigger="click"
            style="display: inline-block; margin: 0 10px;"
          >
            <el-button
              slot="reference"
              type="success"
              size="mini"
              plain
            >表头
            </el-button>
            <el-checkbox
              v-model="allColumnSelected"
              :indeterminate="allColumnSelectedIndeterminate"
              @change="handleCheckedAllTableColumn"
            >
              全选
            </el-checkbox>
            <el-checkbox
              v-for="item in tableColumnList"
              :key="item.label"
              v-model="item.visible"
              @change="handleCheckedTableColumn(item)"
            >
              {{ item.label }}
            </el-checkbox>
          </el-popover>
          <el-button
            v-if="type==='1'"
            type="info"
            size="mini"
            @click="handleReelect"
          >重选
          </el-button>
          <el-button
            v-if="type==='2'"
            v-hasPermi="['hr:salaryMonth:make:add']"
            type="info"
            size="mini"
            @click="handleRedo"
          >重做
          </el-button>

          <!--v-if="type!=='3'"
              v-hasPermi="['hr:salaryMonth:make:add']"-->
          <div id="import-box" style="display: inline-block; margin: 0 10px;">
            <el-button
              v-if="type!='3'"
              id="upload-import"
              size="mini"
              type="primary"
              plain
              @click="handleImport"
            >导入
            </el-button>
          </div>
          <el-button
            v-if="type!='3'"
            v-hasPermi="['hr:salaryMonth:make:add']"
            size="mini"
            type="warning"
            plain
            @click="handleExport"
          >导出
          </el-button>
          <el-button
            v-if="type!=='3'"
            v-hasPermi="['hr:salaryMonth:make:add']"
            type="primary"
            size="mini"
            @click="handleSave"
          >保存
          </el-button>
          <el-button
            v-if="type!=='3'"
            v-hasPermi="['hr:salaryMonth:make:add']"
            type="warning"
            size="mini"
            @click="handleApprove()"
          >提交
          </el-button>
        </div>
      </div>
    </div>
    <template>
      <el-table
        ref="table"
        :key="tableKey"
        v-loading="listLoading"
        class="list-table"
        :data="currentListData"
        stripe
        size="small"
        fit
        highlight-current-row
        show-summary
        :summary-method="handleSummaries"
        :default-expand-all="isExpand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column fixed="left" :show-overflow-tooltip="true" prop="employeeName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">姓名</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" width="250" prop="companyName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">公司</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.companyName }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" width="160" prop="certNo">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">身份证号</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.certNo }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" width="100" prop="forum">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">板块</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.plateBlockName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('deptName')"
          :show-overflow-tooltip="true"
          prop="deptName"
          width="150"
          label="部门名称"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">部门名称</p>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('salary')"
          :show-overflow-tooltip="true"
          prop="salary"
          label="基本工资"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">基本工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.salary"
                class="edit-input"
                size="small"
                :disabled="true"
                :placeholder="`${scope.row.salary}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'salary')"
              />
            </template>
            <span v-else>{{ scope.row.salary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('postSalary')"
          :show-overflow-tooltip="true"
          prop="postSalary"
          label="岗位工资(元)"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.postSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                :placeholder="0"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'postSalary')"
              />
            </template>
            <span v-else>{{ scope.row.postSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('status')" :show-overflow-tooltip="true" prop="status" label="员工状态">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">在职状态</p>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.employeeStatus | employeeStatus" size="small">{{ scope.row.employeeStatus |
              employeeStatus('text') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('postName')" :show-overflow-tooltip="true" prop="postName" label="岗位/职务">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位/职务</p>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('onboardingDate')"
          :show-overflow-tooltip="true"
          prop="onboardingDate"
          label="入职日期"
          width="100"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">入职日期</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.onboardingDate | formatDate('yyyy-MM-dd') | formatDefaultDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('leaveDate')"
          :show-overflow-tooltip="true"
          prop="leaveDate"
          label="离职日期"
          width="100"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">离职日期</p>
          </template>
          <template slot-scope="scope">
            <span>
              {{ scope.row.leaveDate | formatDate('yyyy-MM-dd') | formatDefaultDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('schuqinDays')"
          :show-overflow-tooltip="true"
          prop="schuqinDays"
          label="实际出勤天数"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">实际出勤天数</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.schuqinDays"
                class="edit-input"
                :placeholder="0"
                @blur="handleChangeInputValue(scope, 'schuqinDays')"
              />
            </template>
            <span v-else>{{ scope.row.schuqinDays }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('paidDays')"
          :show-overflow-tooltip="true"
          prop="paidDays"
          label="计薪天数"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">计薪天数</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.paidDays"
                class="edit-input"
                :placeholder="0"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'paidDays')"
              />
            </template>
            <span v-else>{{ scope.row.paidDays }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('baseSalary')"
          :show-overflow-tooltip="true"
          prop="baseSalary"
          label="实发基本工资"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">实发基本工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.baseSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'baseSalary')"
              />
            </template>
            <span v-else>{{ scope.row.baseSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('sickPay')"
          :show-overflow-tooltip="true"
          prop="sickPay"
          label="病假工资(元)"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">病假工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.sickPay"
                class="edit-input"
                size="small"
                :placeholder="0"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'sickPay')"
              />
            </template>
            <span v-else>{{ scope.row.sickPay }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('stateSubsidies')"
          :show-overflow-tooltip="true"
          prop="stateSubsidies"
          label="项目补贴"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">项目补贴(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.stateSubsidies"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.stateSubsidies}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'stateSubsidies')"
              />
            </template>
            <span v-else>{{ scope.row.stateSubsidies }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('assessmentSalary')"
          :show-overflow-tooltip="true"
          prop="assessmentSalary"
          label="绩效"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">绩效(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.assessmentSalary"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.salaryAssessment}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'assessmentSalary')"
              />
            </template>
            <span v-else>{{ scope.row.assessmentSalary }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="columnsVisible('bonus')"
          :show-overflow-tooltip="true"
          prop="bonus"
          label="奖金"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">奖金(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.bonus"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.bonus}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'bonus')"
              />
            </template>
            <span v-else>{{ scope.row.bonus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('dollars')"
          :show-overflow-tooltip="true"
          prop="dollars"
          label="课酬"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">课酬(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.dollars"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.dollars}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'dollars')"
              />
            </template>
            <span v-else>{{ scope.row.dollars }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('salesCommissions')"
          :show-overflow-tooltip="true"
          prop="salesCommissions"
          label="销售提成"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">销售提成(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.salesCommissions"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.salesCommissions}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'salesCommissions')"
              />
            </template>
            <span v-else>{{ scope.row.salesCommissions }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('fillMoney')"
          :show-overflow-tooltip="true"
          prop="fillMoney"
          label="补款"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补款(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.fillMoney"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.fillMoney}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'fillMoney')"
              />
            </template>
            <span v-else>{{ scope.row.fillMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('attendanceDeduction')"
          :show-overflow-tooltip="true"
          prop="attendanceDeduction"
          label="迟到"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">迟到(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.attendanceDeduction"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'attendanceDeduction')"
              />
            </template>
            <span v-else>{{ scope.row.attendanceDeduction }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('otherDeduction')"
          :show-overflow-tooltip="true"
          prop="otherDeduction"
          label="其他扣款"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">其他扣款(税前)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.otherDeduction"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'otherDeduction')"
              />
            </template>
            <span v-else>{{ scope.row.otherDeduction }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="payableSalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">应发工资(总)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.payableSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'payableSalary')"
              />
            </template>
            <span v-else>{{ scope.row.payableSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="payableSalaryA" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">应发工资(A)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.payableSalaryA"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'payableSalaryA')"
              />
            </template>
            <span v-else>{{ scope.row.payableSalaryA }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('socialSecurity')"
          :show-overflow-tooltip="true"
          prop="socialSecurity"
          label="社保"
          width="170"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">社保(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.socialSecurity"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'socialSecurity')"
              />
            </template>
            <span v-else>{{ scope.row.socialSecurity }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('personalSocialSecurityAdjust')"
          :show-overflow-tooltip="true"
          prop="personalSocialSecurityAdjust"
          label="个人社保扣除总调整"
          width="170"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人社保扣除总调整(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.personalSocialSecurityAdjust"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'personalSocialSecurityAdjust')"
              />
            </template>
            <span v-else>{{ scope.row.personalSocialSecurityAdjust }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="columnsVisible('providentFund')"
          :show-overflow-tooltip="true"
          prop="providentFund"
          label="公积金"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">公积金(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.providentFund"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'providentFund')"
              />
            </template>
            <span v-else>{{ scope.row.providentFund }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('providentFundAdjust')"
          :show-overflow-tooltip="true"
          prop="providentFundAdjust"
          label="个人公积金扣除调整"
          width="170"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人公积金扣除调整</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.providentFundAdjust"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'providentFundAdjust')"
              />
            </template>
            <span v-else>{{ scope.row.providentFundAdjust }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('beforeTaxSalary')"
          :show-overflow-tooltip="true"
          prop="beforeTaxSalary"
          label="缴税工资"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">缴税工资(总）</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.beforeTaxSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'beforeTaxSalary')"
              />
            </template>
            <span v-else>{{ scope.row.beforeTaxSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('beforeTaxSalaryA')"
          :show-overflow-tooltip="true"
          prop="beforeTaxSalaryA"
          label="缴税工资(A）"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">缴税工资(A）</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.beforeTaxSalaryA"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'beforeTaxSalaryA')"
              />
            </template>
            <span v-else>{{ scope.row.beforeTaxSalaryA }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('personalIncomeTax')"
          :show-overflow-tooltip="true"
          prop="personalIncomeTax"
          label="个人所得税（总）"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人所得税（总）</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.personalIncomeTax"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'personalIncomeTax')"
              />
            </template>
            <span v-else>{{ scope.row.personalIncomeTax }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('personalIncomeTaxA')"
          :show-overflow-tooltip="true"
          prop="personalIncomeTaxA"
          label="个人所得税（A）"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人所得税（A）</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.personalIncomeTaxA"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'personalIncomeTaxA')"
              />
            </template>
            <span v-else>{{ scope.row.personalIncomeTaxA }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('compensation')"
          :show-overflow-tooltip="true"
          prop="compensation"
          label="补偿金/其他"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补偿金/其他(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.compensation"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'compensation')"
              />
            </template>
            <span v-else>{{ scope.row.compensation }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="columnsVisible('hoOther')"
          :show-overflow-tooltip="true"
          prop="hoOther"
          label="其他扣款(税后)"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">其他扣款(税后)(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.hoOther"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'hoOther')"
              />
            </template>
            <span v-else>{{ scope.row.hoOther }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('realSalary')"
          :show-overflow-tooltip="true"
          prop="realSalary"
          label="本次实发金额(总）"
          width="150"
          fixed="right"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">本次实发金额(总）</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.realSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'realSalary')"
              />
            </template>
            <span v-else>{{ scope.row.realSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('realSalaryA')"
          :show-overflow-tooltip="true"
          prop="realSalaryA"
          label="A发放金额"
          width="150"
          fixed="right"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">A发放金额</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.realSalaryA"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'realSalaryA')"
              />
            </template>
            <span v-else>{{ scope.row.realSalaryA }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('realSalaryB')"
          :show-overflow-tooltip="true"
          prop="realSalaryB"
          label="B发放金额"
          width="150"
          fixed="right"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">B发放金额</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.realSalaryB"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'realSalaryB')"
              />
            </template>
            <span v-else>{{ scope.row.realSalaryB }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('remark')"
          :show-overflow-tooltip="true"
          prop="remark"
          label="备注"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">备注</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.remark"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'remark')"
              />
            </template>
            <span v-else>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="type != 3"
          ref="actionColumn"
          fixed="right"
          align="left"
          label="操作"
          :width="actionWidth"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['hr:salaryMonth:make:add']"

              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            />
            <slot name="rights" :row-data="scope.row" />
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="pagination-container">
      <el-pagination
        background
        :current-page="searchKey.pageNum"
        :page-sizes="[10, 15, 20]"
        :page-size="searchKey.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import { create, all } from 'mathjs'
import numeral from 'numeral'
import commonMixins from '@/mixins/common'
import salaryMixins from '@/mixins/salary'
import filters from '@/filters/filters'
import tagFilter from '@/filters/tagFilter'
import salaryImportExcel from '@/mixins/salaryImportExcel'

const math = create(all, {
  number: 'BigNumber',
  precision: 64
})

export default {
  name: 'SalarymakeTable',
  components: {},
  mixins: [commonMixins, salaryMixins, filters, tagFilter, salaryImportExcel],
  props: {
    data: { // 列表数据
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    searchParams: { // 搜索参数
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    totalCount: {
      type: [String, Number],
      required: true,
      default: 0
    },
    pnum: {
      type: [Number],
      required: true,
      default: 0
    },
    listLoading: {
      type: [Boolean],
      required: true,
      default: false
    },
    type: {
      type: [String],
      required: true,
      default: '1'
    },
    deptName: {
      type: [String],
      default: '-'
    },
    salaryDate: {
      type: [String],
      default: '-'
    },

    paramsData: {
      type: Object,
      required: true,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      title: this.paramsData.title,
      searchKey: {},
      isExpand: true,
      tableSelectedData: [], // 选中的表数据
      listData: [] // 列表数据
    }
  },
  computed: {
    currentListData() { // 当前的数据列表
      const { listData, totalCount } = this

      const { pageNum, pageSize } = this.searchKey
      let totalPage = 0 // 总页数
      if ((totalCount / pageSize) > parseInt(totalCount / pageSize)) {
        totalPage = parseInt(totalCount / pageSize) + 1
      } else {
        totalPage = parseInt(totalCount / pageSize)
      }
      // 对数据进行分页
      const startRow = (pageNum - 1) * pageSize
      const endRow = (pageNum * pageSize > totalCount ? totalCount : pageNum * pageSize) - 1
      return listData.filter((item, index) => {
        listData[index].baseSalary = this.computedPayRealBaseSalary(item)
        listData[index].payableSalary = this.computedPayableSalary(item)
        listData[index].payableSalaryA = this.computedPayableSalaryA(item)
        listData[index].beforeTaxSalary = this.computedBeforeTaxSalary(item, listData[index].payableSalary)
        listData[index].beforeTaxSalaryA = this.computedBeforeTaxSalaryA(item, listData[index].payableSalaryA)
        listData[index].personalIncomeTax = this.computedPersonalIncomeTax(item, listData[index].beforeTaxSalary) // 个税
        listData[index].personalIncomeTaxA = this.computedPersonalIncomeTaxA(item, listData[index].beforeTaxSalaryA) // 个税
        listData[index].labourServiceTax = this.computedLabourServiceTax(item) // 劳务税
        listData[index].realSalary = this.computedRealSalary(item, listData[index].beforeTaxSalary, listData[index].personalIncomeTax)
        listData[index].realSalaryA = this.computedRealSalaryA(item, listData[index].beforeTaxSalaryA, listData[index].personalIncomeTaxA)
        listData[index].realSalaryB = this.computedRealSalaryB(item, listData[index].realSalaryA, listData[index].realSalary)
        listData[index].salaryType = '11'
        return startRow <= index && index <= endRow
      })
    },
    actionWidth() {
      const { permissionValue, baseWidth } = {
        baseWidth: 0,
        permissionValue: ['hr:salaryMonth:make:add']
      }
      let width = baseWidth
      const all_permission = '*:*:*'
      const permissions = this.$store.getters.permissions
      if (permissionValue.length > 0) {
        const isAllPermission = permissions.some(permission => { // 是否全部权限
          return all_permission === permission
        })
        const existingPermissions = permissions.filter(permission => { // 存在的权限
          return permissionValue.includes(permission)
        })
        if (isAllPermission) {
          width += permissionValue.length * 60
        } else {
          width += existingPermissions.length * 60
        }
      }
      return width
    }
  },
  methods: {
    goBack() {
      let name = 'Salary'

      if (this.$route.query.task) {
        name = 'Task'
      }
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.replace({
        name: name
      })
    },
    computedPayRealBaseSalary(row) {
      let { salary, paidDays, postSalary, schuqinDays } = row
      salary = salary || 0
      paidDays = paidDays || 0
      postSalary = postSalary || 0
      schuqinDays = schuqinDays || 0
      const formula = `(${salary} + ${postSalary}) / ${paidDays} * ${schuqinDays}`
      return this.formatNumber({ formula })
    },
    computedPayableSalary(row) { // 计算应发工资
      // 基本工资 + 绩效奖金 + 岗位工资 + 营销奖金（行方）+ 补贴工资 + 加班工资 - 考勤扣款 + 津贴 + 讲师餐补 + 劳务工资 - 其他扣款
      let { baseSalary, assessmentSalary, sickPay, stateSubsidies, bonus, dollars, salesCommissions, fillMoney, attendanceDeduction, otherDeduction } = row
      baseSalary = baseSalary || 0
      assessmentSalary = assessmentSalary || 0
      sickPay = sickPay || 0
      stateSubsidies = stateSubsidies || 0
      bonus = bonus || 0
      dollars = dollars || 0
      salesCommissions = salesCommissions || 0
      fillMoney = fillMoney || 0
      attendanceDeduction = attendanceDeduction || 0
      otherDeduction = otherDeduction || 0
      const formula = `${baseSalary} + ${assessmentSalary} + ${sickPay} + ${stateSubsidies} + ${bonus} + ${dollars} + ${salesCommissions} + ${fillMoney} - ${attendanceDeduction} - ${otherDeduction}`
      return this.formatNumber({ formula })
    },
    computedPayableSalaryA(row) { // 计算应发工资
      // 基本工资 + 病假工资  - 迟到 -  其他扣款（税前）
      let { baseSalary, sickPay, attendanceDeduction, otherDeduction } = row
      baseSalary = baseSalary || 0
      sickPay = sickPay || 0
      attendanceDeduction = attendanceDeduction || 0
      otherDeduction = otherDeduction || 0
      const formula = `${baseSalary}  + ${sickPay} - ${attendanceDeduction} - ${otherDeduction}`
      return this.formatNumber({ formula })
    },
    computedBeforeTaxSalary(row, payableSalary) { // 计算税前工资
      let { personalSocialSecurityAdjust, socialSecurity, providentFund, providentFundAdjust } = row
      personalSocialSecurityAdjust = personalSocialSecurityAdjust || 0
      socialSecurity = socialSecurity || 0
      providentFund = providentFund || 0
      providentFundAdjust = providentFundAdjust || 0

      const formula = `${payableSalary} - ${personalSocialSecurityAdjust} - ${socialSecurity} - ${providentFund} - ${providentFundAdjust}`
      return this.formatNumber({ formula })
    },
    computedBeforeTaxSalaryA(row, payableSalaryA) { // 计算税前工资
      let { personalSocialSecurityAdjust, socialSecurity, providentFund, providentFundAdjust } = row
      personalSocialSecurityAdjust = personalSocialSecurityAdjust || 0
      socialSecurity = socialSecurity || 0
      providentFund = providentFund || 0
      providentFundAdjust = providentFundAdjust || 0

      const formula = `${payableSalaryA} - ${personalSocialSecurityAdjust} - ${socialSecurity} - ${providentFund} - ${providentFundAdjust}`
      return this.formatNumber({ formula })
    },
    /**
       * 计算个人所得税
       * @param beforeTaxSalary 税前工资 - 5000
       * @returns {number}
       */
    computedPersonalIncomeTax(row, beforeTaxSalary) {
      let cTax = math.evaluate(`${beforeTaxSalary} - 5000`)
      cTax = cTax < 0 ? 0 : cTax
      if (cTax <= 3000) {
        cTax = `${cTax} * 0.03`
      } else if (cTax > 3000 && cTax <= 12000) {
        cTax = `${cTax} * 0.10 - 210`
      } else if (cTax > 12000 && cTax <= 25000) {
        cTax = `${cTax} * 0.20 - 1410`
      } else if (cTax > 25000 && cTax <= 35000) {
        cTax = `${cTax} * 0.25 - 2660`
      } else if (cTax > 35000 && cTax <= 55000) {
        cTax = `${cTax} * 0.30 - 4410`
      } else if (cTax > 55000 && cTax <= 80000) {
        cTax = `${cTax} * 0.35 - 7160`
      } else {
        cTax = `${cTax} * 0.45 - 15160`
      }
      return this.formatNumber({ formula: cTax })
    },
    computedPersonalIncomeTaxA(row, beforeTaxSalaryA) {
      let cTax = math.evaluate(`${beforeTaxSalaryA} - 5000`)
      cTax = cTax < 0 ? 0 : cTax
      if (cTax <= 3000) {
        cTax = `${cTax} * 0.03`
      } else if (cTax > 3000 && cTax <= 12000) {
        cTax = `${cTax} * 0.10 - 210`
      } else if (cTax > 12000 && cTax <= 25000) {
        cTax = `${cTax} * 0.20 - 1410`
      } else if (cTax > 25000 && cTax <= 35000) {
        cTax = `${cTax} * 0.25 - 2660`
      } else if (cTax > 35000 && cTax <= 55000) {
        cTax = `${cTax} * 0.30 - 4410`
      } else if (cTax > 55000 && cTax <= 80000) {
        cTax = `${cTax} * 0.35 - 7160`
      } else {
        cTax = `${cTax} * 0.45 - 15160`
      }
      return this.formatNumber({ formula: cTax })
    },
    /**
       * 劳务报酬所得，每次收入不超过四千元的，减除费用八百元；四千元以上的，减除百分之二十的费用，其余
       * 额为应纳税所得额。然后适用比例税率，税率为百分之二十。
       *
       * |收入(x)         |应纳税部分(y)     |   阶梯         |税率        | 纳税额           | 速扣系数     |
       * -----------------------------------------------------------------------------------------------
       * |x<=800         |      0       |     0             |  0        | 0               | 0           |
       * |800<x<=4000    |    x-800     |    y<=20000       |  20%      | (x-800)*20%     | 0           |
       * |4000<x<=20000  |    0.8x      |    y<=20000       |  20%      | 0.8x*20%        | 0           |
       * |20000<x<=50000 |    0.8x      |    20000<y<=50000 |  30%      | 0.8x*30%        | 2000        |
       * |x>50000        |    0.8x      |    y>50000        |  40%      | 0.8x*40%        | 7000        |
       *
       * @param originIncome
       * @returns {number}
       */
    computedIncomeAfterTax(originIncome) {
      // 应纳税部分
      let taxIncome = 0 // 应纳税部分
      let taxRate = 0 // 税率
      let quickDeducData = 0 // 速扣系数
      if (originIncome <= 800) {
        return originIncome
      } else if (originIncome > 800 && originIncome <= 4000) {
        taxIncome = math.evaluate(`${originIncome} - 800`)
        taxRate = 0.2
      }
      if (originIncome > 4000) {
        taxIncome = math.evaluate(`${originIncome} * 0.8`)
      }
      if (taxIncome <= 20000) {
        taxRate = 0.2
      } else if (taxIncome > 20000 && taxIncome <= 50000) {
        taxRate = 0.3
        quickDeducData = 2000
      }
      if (taxIncome > 50000) {
        taxRate = 0.4
        quickDeducData = 7000
      }
      const incomeAfterTax = `${originIncome} - (${taxIncome} * ${taxRate} - ${quickDeducData})`
      return this.formatNumber({ formula: incomeAfterTax })
    },
    /**
       * 计算劳务税 = 劳务工资 - 劳务税后工资
       * @param originIncome
       * @returns {number}
       */
    computedLabourServiceTax(row) {
      const { labourServiceSalary } = row
      const incomeAfterTax = this.computedIncomeAfterTax(labourServiceSalary)
      const labourServiceTax = `${labourServiceSalary} - ${incomeAfterTax}`
      return this.formatNumber({ formula: labourServiceTax })
    },
    /**
       * 实发工资 = 税前工资 - 个税 + 补偿金/其他 - 其他扣款(税后)
       * @param beforeTaxSalary
       * @param personalIncomeTax
       * @param labourServiceTax
       * @returns {*}
       */
    computedRealSalary(row, beforeTaxSalary, personalIncomeTax) {
      const { compensation, hoOther } = row
      const formula = `${beforeTaxSalary} + ${compensation} - ${personalIncomeTax} - ${hoOther}`
      return this.formatNumber({ formula })
    },
    computedRealSalaryA(row, beforeTaxSalaryA, personalIncomeTaxA) {
      const { compensation, hoOther } = row
      const formula = `${beforeTaxSalaryA} + ${compensation} - ${personalIncomeTaxA} - ${hoOther}`
      return this.formatNumber({ formula })
    },
    computedRealSalaryB(row, realSalaryA, realSalary) {
      const formula = `${realSalary} - ${realSalaryA}`
      return this.formatNumber({ formula })
    },
    handleSizeChange(val) { // 分页改变每页条数
      this.searchKey.pageSize = val
      // this.$emit('on-init', this.searchKey)
    },
    handleCurrentChange(val) { // 分页切换分页
      this.searchKey.pageNum = val
      // this.$emit('on-init', this.searchKey)
    },
    handleSelectionChange(selection) { // 多选框选中数据
      this.tableSelectedData = selection
    },
    handleExpand: debounce(function() { // 查询，防抖
      this.isExpand = !this.isExpand
      this.$emit('on-init', this.searchKey)
    }, 300),
    handleReelect() { // 重选选择
      this.$emit('on-reelect')
    },
    handleRedo() { // 重做
      this.$emit('on-redo')
    },
    handleSave: debounce(function() { // 保存，防抖
      this.$emit('on-save', this.listData)
    }, 300),
    handleApprove() { // 是否审批
      this.$emit('on-approve', this.listData)
    },
    handleExport: debounce(function() { // 导出，防抖
      this.$emit('on-export')
    }, 300),

    handleImport() { // 导入
      this.$emit('on-import')
    },
    handleChangeInputValue(data, key) {
      const isCurrency = /^(([1-9]\d*)|0)(\.\d{1,2})?$/
      const { pageNum, pageSize } = this.searchKey
      const { row } = data
      if (key !== 'remark' && !isCurrency.test(row[key])) {
        const value = numeral(row[key])
        row[key] = value.format('0.00')
      }
      const listDataIndex = (pageNum - 1) * pageSize + data.$index
      const baseSalary = this.computedPayRealBaseSalary(row)
      const payableSalary = this.computedPayableSalary(row)
      const payableSalaryA = this.computedPayableSalaryA(row)
      const beforeTaxSalary = this.computedBeforeTaxSalary(row, payableSalary)
      const beforeTaxSalaryA = this.computedBeforeTaxSalaryA(row, payableSalaryA)
      const personalIncomeTax = this.computedPersonalIncomeTax(row, beforeTaxSalary) // 个税
      const personalIncomeTaxA = this.computedPersonalIncomeTaxA(row, beforeTaxSalaryA) // 个税A
      const labourServiceTax = this.computedLabourServiceTax(row) // 劳务税
      const realSalary = this.computedRealSalary(row, beforeTaxSalary, personalIncomeTax) // 实发工资
      const realSalaryA = this.computedRealSalaryA(row, beforeTaxSalaryA, personalIncomeTaxA) // A发放金额
      const realSalaryB = this.computedRealSalaryB(row, realSalaryA, realSalary) // B发放金额
      this.$set(this.listData[listDataIndex], key, row[key])
      this.$set(this.listData[listDataIndex], 'payableSalary', payableSalary)
      this.$set(this.listData[listDataIndex], 'payableSalaryA', payableSalaryA)
      this.$set(this.listData[listDataIndex], 'beforeTaxSalary', beforeTaxSalary)
      this.$set(this.listData[listDataIndex], 'beforeTaxSalaryA', beforeTaxSalaryA)
      this.$set(this.listData[listDataIndex], 'personalIncomeTax', personalIncomeTax)
      this.$set(this.listData[listDataIndex], 'personalIncomeTaxA', personalIncomeTaxA)
      this.$set(this.listData[listDataIndex], 'labourServiceTax', labourServiceTax)
      this.$set(this.listData[listDataIndex], 'realSalary', realSalary)
      this.$set(this.listData[listDataIndex], 'realSalaryA', realSalaryA)
      this.$set(this.listData[listDataIndex], 'realSalaryB', realSalaryB)
      this.$set(this.listData[listDataIndex], 'baseSalary', baseSalary)
    },
    changeTitle(e) {
      this.$forceUpdate() // 我也不明白为什么，就是无法输入，只能这样了
    },
    handleDelete(data = null) { // 删除
      const { tableSelectedData } = this
      this.$emit('on-delete', data || tableSelectedData[0])
    }
  },
  watch: {
    data: {
      handler: function(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(this.listData)) {
          this.listData = JSON.parse(JSON.stringify(newVal))
        }
      },
      deep: true,
      immediate: true
    },
    searchParams: {
      handler: function(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
          this.searchKey = JSON.parse(JSON.stringify(newVal))
        }
      },
      deep: true,
      immediate: true
    },

    paramsData: {

      handler: function(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(this.paramsData)) {
          this.paramsData = JSON.parse(JSON.stringify(newVal))
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {
    this.getTableColumns()
  }
}
</script>

<style lang="scss" scoped>
  .list-table {
    .el-button--mini {
      padding: 7px 15px;
      width: 45px;
      color: #fff;
    }

    & /deep/ .el-table__header-wrapper {
      th {
        background-color: #fff;
      }
    }
  }
</style>

<style lang="scss">
  .el-popover {
    max-height: 400px;
    overflow-x: auto;
    overflow-y: scroll;
  }
</style>
